import React, { Component } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'
export default class Search extends Component {

  handleSearch = () => {
    // 拿到输入的值
    const { inputNode: { value } } = this
    // 发送请求前更新状态
    PubSub.publish("search",{isFirst:false,isLoading:true})
    // 发送请求
    axios.get(`https://api.github.com/search/users?q=${value}`).then(res => {
      console.log("成功了",res);
      let { data } = res
      // 请求成功后更新状态
      PubSub.publish("search",{userList: data.items,isLoading:false})

    }).catch(err => {
      console.log(err);
      PubSub.publish("search",{err: '请求出错',isLoading:false})
    })

  }
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input ref={c => this.inputNode = c} type="text" placeholder="enter the name you search" />&nbsp;
          <button onClick={this.handleSearch}>Search</button>
        </div>
      </section>
    )
  }
}
